<template>
  <view class="chart-device">
    <view class="chart-title flex items-center">
      <image src="/static/images/index-device-tj.png" class="index-device-tj-img">设备统计</view>	
    <view class="flex items-center ">
      <view class="">
        <view class="qiun-charts" >
          <canvas canvas-id="canvasArea" id="canvasArea" class="charts"></canvas>
          <view class="device-total-num">
            总设备：{{ typeCountMap.count }}
          </view>
          <view class="device-online-box">
            <view class="device-online-num">
              {{ typeCountMap.onlineCount }}
            </view>
            <view class="device-online-txt">
              在线
            </view>
          </view>
        </view>
      </view>
      <view class="chart-device-right">
        <view v-for="(item, key) in series" :key="key" class="device-item">
          <view class="circle-item-color" :style="{ backgroundColor: item.color }"></view>
          <text class="device-item-name">{{ item.name }}</text>
          <text class="device-item-num">{{ item.data }}</text>
        </view>
        <!-- <view class="device-item">
          <text class="device-item-name">传感器</text><text class="device-item-num">564</text>
        </view>
        <view class="device-item">
          <text class="device-item-name">电表</text><text class="device-item-num">56</text>
        </view>
        <view class="device-item">
          <text class="device-item-name">水表</text><text class="device-item-num">564</text>
        </view>
        <view class="device-item">
          <text class="device-item-name">空调</text><text class="device-item-num">564</text>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _self;
var canvaArea=null;
import { mapState } from "vuex";

const colorArrays = ['#47D590', '#FFB350', '#40A0FF', '#FFD447', '#76819D', '#EB5405', '#00E1EB', '#244781', '#B3CFE3']
export default {
  components: {},
  props: {},
  data() {
    return {
      	cWidth:'',
				cHeight:'',
				pixelRatio:1,
    };
  },
  created() {},
  mounted() {
    _self = this;
    this.cWidth=uni.upx2px(300);
    this.cHeight=uni.upx2px(300);
    // this.getServerData();
  },
  computed: {
    ...mapState({
      currentProject: (state) => state.project.project,
      typeCountMap: (state) => state.device.typeCountMap,
    }),
    series () {
      let idx = 0
      if (this.typeCountMap && this.typeCountMap.typeCount) {
        if (idx >= colorArrays.length) idx =0
        const s = []
        for (const key in this.typeCountMap.typeCount) {
          if (this.typeCountMap.typeCount.hasOwnProperty(key)) {
            const element = this.typeCountMap.typeCount[key];
            s.push({
            name: key,
            data: element,
            color: colorArrays[idx]
          })
          idx++
          }
        }
        return s
      }
      return []
      /**
       * [{
          "name": "一班",
          "data": 50,
          "color": "#47D590" 
          }, {
          "name": "二班",
          "data": 30,
           "color": "#FFB350" 
          }, {
          "name": "三班",
          "data": 20,
           "color": "#40A0FF" 
          }, {
          "name": "四班",
          "data": 18,
           "color": "#FFD447" 
          }]
       */
    }
  },
  methods: {
    	// getServerData(){
      //   this.showArea()
			// },
			showArea(canvasId = 'canvasArea',chartData){
				canvaArea=new uCharts({
				$this:_self,
					canvasId: canvasId,
					type: 'ring',
					fontSize:11,
          legend:false,
          padding: [0, 0, 0, 0],
					// title: {
					// 	name: '70%',
					// 	color: '#7cb5ec',
					// 	fontSize: 25*_self.pixelRatio,
					// 	offsetY:-20*_self.pixelRatio,
					// },
					// subtitle: {
					// 	name: '收益率',
					// 	color: '#666666',
					// 	fontSize: 15*_self.pixelRatio,
					// 	offsetY:30*_self.pixelRatio,
					// },
					extra: {
						pie: {
              border: false,
              ringWidth: 10,
              labelWidth:15,
              offsetAngle: -90
						}
					},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					series:  this.series,
					animation: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					disablePieStroke: false,
					dataLabel: false,
				});
				
			},
  },
  watch: {
    // currentProject: function(val) {
    //   if (val.id) {
    //     this.$store.dispatch('device/getDeviceTypeCount', val.id)
    //   }
    // },
    series: function(val) {
      this.showArea()
    }
  },
};
</script>
<style lang="scss" scoped>
.chart-device{
  position: relative;
  margin-top: 22rpx;
  padding: 24rpx;
  background-color: #FFFFFF;
  box-shadow:0px 3px 14px rgba(209,209,209,0.16);
  .chart-title{
    font-size: 32rpx;
    font-weight: bold;
    .index-device-tj-img{
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }
  }
  .chart-device-right{
    margin-left: 28rpx;
    .device-item{
      position: relative;
      padding-left: 40rpx;
      margin-bottom: 15rpx;
      color: $uni-text-color-grey;
      font-size: 28rpx;
      & .circle-item-color {
        position: absolute;
        left: 0;
        top: 10rpx;
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
      }
      // &::before{
      //   content: '';
      //   position: absolute;
      //   left: 0;
      //   top: 10rpx;
      //   width: 16rpx;
      //   height: 16rpx;
      //   border-radius: 50%;
      // }
      .device-item-name{
        width: 208rpx;
        display: inline-block;
      }
      .device-item-num{
        // padding-left: 40rpx;
        color: #383C48;
      }
    }
    // .device-item:nth-child(1){
    //    &::before{
    //      background-color: #47D590;
    //    }
    // }
    //  .device-item:nth-child(2){
    //    &::before{
    //      background-color: #FFB350;
    //    }
    // }
    //  .device-item:nth-child(3){
    //    &::before{
    //      background-color: #40A0FF;
    //    }
    // }
    //  .device-item:nth-child(4){
    //    &::before{
    //      background-color: #FFD447;
    //    }
    // }
  }
  .device-total-num{
    position: absolute;
    left: 80rpx;
    bottom: 20rpx;
    font-size: 28rpx;
    color: #464C5B;
  }
  .device-online-box{
    position: absolute;
    left: 148rpx;
    top: 190rpx;
    text-align: center;
    .device-online-num{
      font-size: 28rpx;
      color: #282A33;
      font-weight: bold;
    }
    .device-online-txt{
      margin-top: 10rpx;
      font-size: 28rpx;
      color: $uni-text-color-grey;
    }
  }
}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 300rpx;
		height: 300rpx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 300rpx;
		height: 300rpx;
		background-color: #FFFFFF;
  }

</style>